<template>
  <div class="rotate">
    <div class="bg-img-div">
      <img id="rotate-bg-img" :src="captcha.backgroundImage" alt ref="bgImgRef"/>
    </div>
    <div class="rotate-img-div" :class="{'rotateImgRest':imgRest}">
      <img id="rotate-image" :src="captcha.sliderImage" ref="sliderImgRef" alt/>
    </div>
  </div>
</template>
<script setup name="rotate">

import {computed, ref} from "vue";
import useSlideVerifyStore from "@/stores/modules/slideVerify.js";

const moveX = computed(() => useSlideVerifyStore().moveX);
const captcha = computed(() => useSlideVerifyStore().captcha);
const imgRest = computed(() => useSlideVerifyStore().imgRest);

const bgImgRef = ref();
const sliderImgRef = ref();

function refresh() {
  console.log(bgImgRef.value.width)
  console.log(bgImgRef.value.height)
  console.log(sliderImgRef.value.width)
  console.log(sliderImgRef.value.height)
  useSlideVerifyStore().initConfig(206, bgImgRef.value.height, sliderImgRef.value.width, sliderImgRef.value.height, 206);
}

//暴露refresh方法
defineExpose({
  refresh
});
</script>
<style scoped>

.after {
  color: #88949d;
}

.bg-img-div {
  width: 100%;
  height: 100%;
  position: absolute;
  transform: translate(0px, 0px);
}

.bg-img-div img {
  width: 100%;
}

.rotateImgRest {
  transform: rotate(0deg);
}

.rotate-img-div {
  height: 100%;
  position: absolute;
  transform: rotate(v-bind(moveX+ "deg"));
  margin-left: 50px;
}

.rotate-img-div img {
  height: 100%;
}
</style>
